import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {
    Form,
    Input,
    InputNumber,
    Button,
    Card,
    Select,
    Radio,
    Icon,
} from 'antd';
import {message} from "antd/lib/index";
import styles from './index.less';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
@connect(state => ({
    submitting: state.paymentConfigruationEdit.loading,
}))
@Form.create()
export default class PaymentConfigruationAdd extends PureComponent{

    handleParentModalVisible = (e) => {
        this.props.handleModalVisible();
    };

    handleSubmit = (editType, pay_id, e) =>{
        this.props.form.validateFieldsAndScroll((err, values) =>{
            if (!err){
                this.props.dispatch({
                    type: `paymentConfigruationEdit/${editType}`,
                    payload: {...values, pay_id: pay_id},
                    callback: (response) => {
                        if (response.result === 0){
                            message.success('提交成功');
                            this.props.handleModalVisible();
                            this.props.handleModalSuccess(this.props.pagination);
                        }else {
                            message.success('提交失败');
                        }
                    }
                })
            }
        })
    };


    render(){
        const {submitting, record, editType} = this.props;
        const {getFieldDecorator, getFieldValue} = this.props.form;
        const formInitValue = editType === 'add' ? '' : record;
        const pay_id = editType === 'add' ? '' : record.pay_id;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };
        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };
        // //noinspection JSAnnotator
        // const limitDecimals = (value: string | number): string => {
        //     const reg = /^(\-)*(\d+)\.(\d\d).*$/;
        //     console.log(value);
        //     if(typeof value === 'string') {
        //         return !isNaN(Number(value)) ? value.replace(reg, '$1$2.$3') : ''
        //     } else if (typeof value === 'number') {
        //         return !isNaN(value) ? String(value).replace(reg, '$1$2.$3') : ''
        //     } else {
        //         return ''
        //     }
        // };
        return(
            <Card bordered = {false}>
                <Form
                    hideRequiredMark //隐藏所有表单的必选标记
                    onsubmit={this.handleSubmit}>
                    <FormItem
                        {...formItemLayout}
                        label = "支付方式编码"
                    >
                        {getFieldDecorator('pay_code', {
                            initialValue:  formInitValue.pay_code || '',
                            rules: [{
                                required: true, message: '请输入支付方式编码',
                            },{
                                max: 20, message: '编码长度最多为20位'
                            }],
                        })(
                            <Input placeholder="请输入"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label = "支付方式名称"
                    >
                        {getFieldDecorator('pay_name', {
                            initialValue: formInitValue.pay_name || '',
                            rules: [{
                                required: true, message: '请输入支付方式名称'
                            },{
                                max: 120, message: '编码长度最多为120位'
                            }],
                        })(
                            <Input placeholder = "请输入"/>
                        )}

                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label = "支付费用"
                    >
                        {getFieldDecorator('pay_fee', {
                            initialValue: formInitValue.pay_fee || '',
                            rules: [{
                                required: true, message: '请输入支付费用'
                            }, {
                                max: 20, message: '支付费用最多为10位'
                            }],
                        })(
                            <Input
                                // min = {0}
                                // formatter = {limitDecimals}
                                // parser = {limitDecimals}
                                // step = {0.01}
                                placeholder = "请输入"/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label={<span>支付方式描述<em className={styles.optional}>(选填)</em></span>}
                    >
                        {getFieldDecorator('pay_desc', {
                            initialValue: formInitValue.pay_desc || '',
                            rules: [{
                            }],
                        })(
                            <Input placeholder = "请输入"/>
                        )}

                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="顺序"
                    >
                        {getFieldDecorator('pay_order',
                            {initialValue: formInitValue.pay_order || 100})(
                            <InputNumber min={0} max={999}/>
                        )}<em className={styles.optional}>数字越大顺序越靠后</em>
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label={<span>配置信息<em className={styles.optional}>(选填)</em></span>}
                    >
                        {getFieldDecorator('pay_config', {
                            initialValue: formInitValue.pay_desc || '',
                            rules: [{
                            }],
                        })(
                            <Input placeholder = "请输入"/>
                        )}

                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="是否可用"
                    >
                        {getFieldDecorator('enabled', {
                            initialValue: !formInitValue.enabled ? 0 : 1,
                            rules: [{
                                required: true, message: '请选择',
                            }],
                        })(
                            <RadioGroup>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="是否货到付款"
                    >
                        {getFieldDecorator('is_cod', {
                            initialValue: !formInitValue.is_cod ? 0 : 1,
                            rules: [{
                                required: true, message: '请选择',
                            }],
                        })(
                            <RadioGroup>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="是否在线支付"
                    >
                        {getFieldDecorator('is_online', {
                            initialValue: !formInitValue.is_online ? 0 : 1,
                            rules: [{
                                required: true, message: '请选择',
                            }],
                        })(
                            <RadioGroup>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>

                    <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                        <Button
                            type="primary"
                            loading={submitting}
                            onClick={this.handleSubmit.bind(this, editType, pay_id)}>
                            提交
                        </Button>
                        <Button
                            style={{marginLeft: 8}}
                            onClick={this.handleParentModalVisible}>
                            取消
                        </Button>
                    </FormItem>

                </Form>

            </Card>
        );
    }
}